/*
 * @Author: syyao 
 * @Date: 2019-05-17 15:22:08 
 * @Last Modified by: hui
 * @Last Modified time: 2019-06-07 04:05:29
 */
<template>
    <div>

        <!--        取消自动输入密码-->
        <input type="password" style="display:none"/>
        <!--        -->

        <div id="Search">
            <Input search placeholder="请查询标签" v-model="keywords" @on-change="remoteMethod1"
                   @on-blur="hide" @keydown.native.40="down" @keydown.native.38="up" @on-search="search" size="large"/>
            <div class="suggest" v-on:click="click" v-bind:class="{'suggestDisplay':loading1}">
                <ul>
                    <li v-for="(option,index) in options1" :key="index" :class="ifSelect(index)">
                        {{option}}
                    </li>
                </ul>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: "SearchWithTips",
        data() {
            return {
                keywords: '',
                timeoutId: null,
                loading1: true,
                options1: [],
                alternate: {
                    item: [],
                    site: 0
                },
                list: ['Alabama', 'Alaska', 'Arizona', 'Illinois', 'Indiana']
            }
        },
        methods: {
            remoteMethod1() {
                if (this.keywords !== '') {
                    let _this = this;
                    this.loading1 = false;
                    this.options1 = ['搜索中'];
                    this.alternate.item = [];
                    this.alternate.site = 0;
                    this.alternate.item[0] = this.keywords;
                    clearTimeout(this.timeoutId);
                    this.timeoutId = setTimeout(function () {
                        let params = new URLSearchParams();
                        params.append("keywords", _this.keywords);
                        _this.http.post(_this, '/TagTipsWhileSearching', params).then(function (msg) {
                            if (msg.data.code === "200") {
                                _this.options1 = msg.data.data;
                                _this.alternate.item.push(...msg.data.data);

                            }

                        })
                    }, 200)
                } else {
                    this.loading1 = true;
                    this.options1 = [];
                }
            },

            localMethod() {
                if (this.keywords !== '') {
                    let _this = this;
                    this.loading1 = false;
                    this.options1 = ['搜索中'];
                    this.alternate.item = [];
                    this.alternate.site = 0;
                    this.alternate.item[0] = this.keywords;
                    setTimeout(() => {
                        _this.options1 = this.list;
                        _this.alternate.item.push(...this.list);
                    }, 200)
                } else {
                    this.loading1 = true;
                    this.options1 = [];
                }
            },

            hide() {
                setTimeout(() => {
                        this.clear()
                    }, 200
                )

            },
            down() {
                if (this.alternate.site < this.alternate.item.length - 1) {
                    this.alternate.site++;
                    this.keywords = this.alternate.item[this.alternate.site];
                }
            },
            up() {

                if (this.alternate.site > 0) {
                    this.alternate.site--;
                    this.keywords = this.alternate.item[this.alternate.site];
                }
            },
            click(e) {
                console.log(e);
                if (e.target.nodeName.toLowerCase() === 'li') {
                    let keywords = e.target.innerText;
                    this.keywords = keywords;
                    this.$router.push({
                        path: '/pictureHub/search',
                        query: {
                            tag: keywords
                        }
                    });
                }
            },
            search(e) {
                this.$router.push({
                    path: '/pictureHub/search',
                    query: {
                        tag: e
                    }
                });
            },
            ifSelect: function (index) {
                if ((index + 1) === this.alternate.site) {
                    return {ifSelect: true}
                } else {
                    return {ifSelect: false}
                }

            },
            clear() {
                this.loading1 = true;
                this.options1 = [];
                this.alternate.item = [];
                this.alternate.site = 0;
            }
        }
    }
</script>

<style scoped>
    .suggest {
        width: 50vw;
        border: 1px solid #dcdee2;
        background: #fff;
        text-align: left;
        z-index: 20;
        position: absolute;
    }

    .suggestDisplay {
        display: none;
    }

    .suggest ul {
        list-style: none;
        margin: 0;
        padding: 0;
        border-radius: 4px;
        color: #515a6e;
        max-height: 160px;
        overflow: auto;
    }

    .suggest ul li {
        padding: 4px 7px;
        height: 32px;
        font-size: 12px;
        line-height: 1.5;
        cursor: pointer;
    }

    .suggest ul li:hover {
        background-color: #e5e5e5
    }

    .ifSelect {
        background-color: #e5e5e5
    }
</style>
